<!-- 我的群组 -->
<template>
  <div id="">
    <headerbox :headerTitle="'我的群组'" :hasBack="true" :addIcon="true" @addEvent="addEvent"></headerbox>

    <div class="noneList" align="center" v-if="myGroupList.length==0">
      <noneList :noneTxt="'您还没有群组，赶快去创建吧！'"></noneList>
      <button type="button" name="button" class="buildbtn" @click="toAddGroup">去创建</button>
    </div>
    <ul class="groupList" v-else>
      <li v-for="myGroup in myGroupList" :key="myGroup.key" @click="toGroupChat(myGroup.id)">
        <img :src="imgUrlLink(myGroup.groupIcon)" alt="" class="groupIcon">
        <div class="">
          <span>{{myGroup.groupName}}</span>
          <p>{{myGroup.memberCount}}人</p>
        </div>
        <img src="@/assets/groupImage/group_icon.png" alt="" width="50" v-if="myGroup.userId==memberId">
      </li>
    </ul>
    <router-view class="childrenPage"></router-view>
  </div>
</template>
<script>
import {circleMyGroup} from '@/utils/ajaxRequest.js';
import { toChildrenPage } from '@/utils/util.js';
export default {
  name: "",
  data: () => ({
    myGroupList:[],
    memberId:'',
  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    toAddGroup() {
      toChildrenPage(this,'addGroup');
    },
    addEvent() {
      toChildrenPage(this,'addGroup');
    },
    // 群聊
    toGroupChat(groupId) {
      this.$router.push({path:'/rongyunGroup',query:{groupId:groupId}});
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    self.memberId = xlyd_loginInfo.id;    //用户id
    circleMyGroup({token:xlyd_loginInfo.token}).then(res=>{
      console.log(res);
      if(res) {
        self.myGroupList = res.data.result;
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.groupList{
  padding: 10px;
  background: white;
  li{
    @include flex;
    border-bottom: 1px solid $boxBgcolor;
    padding: 10px 0;
    div{
      @include flexcell;
      margin: 0 10px;
      p{
        color: $lightColor;
        font-size: 12px;
      }
    }
    .groupIcon{
      width: 40px;
      height: 40px;
      border-radius: 100%;
    }
  }
}
.buildbtn{
  border:1px solid $blueColor;
  color: $blueColor;
  height: 30px;
  padding: 0 20px;
  border-radius: 4px;
  background: none;
}
</style>
